<template>
    <view class="tabbar">
      <view class="tab" v-for="(item,index) in tabbarList" :key="index" @click="navigatorTo(item.url)">
        <!-- 判断是否有点击，如果没有就不是**样式，点击就是**的样式 -->
        <image class="imgsize" v-if="item.type == 0" :src="current == index ? item.selectIcon : item.icon"
          mode="widthFix"></image>
        <view :class="current == index ?'active':'text'">{{item.name}}</view>
      </view>
   
    </view>
</template>
<script setup>

const props = defineProps({
    current: {
        type: Number,
        default: 0, //默认第一个页面tabbar**
    },
})

const tabbarList = ref([])

/**
 * 生命周期函数--监听页面显示
 */
 onLoad(() => {
  // 加载tabbar列表
  tabbarList.value = uni.getStorageSync('tabbar')
  // http.request({
  //   url: '/tabbar',
  //   method: 'GET',
  //   data: {
  //     parentId: ''
  //   }
  // })
  //   .then(({ data }) => {
  //       tabbarList.value = data
  //       // 保存登陆信息
  //       wx.setStorageSync('tabbar', data)
  //   })

})

const navigatorTo = (e) => {
    uni.switchTab({
        url: e,
    })
}

</script>

<style lang="scss" scoped>
.tabbar {
    position: fixed;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS<11.2 */
    padding-bottom: env(safe-area-inset-bottom);
    /* 兼容iOS>= 11.2 */
    background-color: #FFFFFF;
    width: 100%;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding-top: 12rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .imgsize {
    width: 56rpx;
    height: 56rpx;
    }

    .text {
    margin-top: 4rpx;
    padding-bottom: 12rpx;
    font-size: 20rpx;
    color: #333333;
    line-height: 20rpx;
    }

    .active {
    margin-top: 4rpx;
    padding-bottom: 12rpx;
    font-size: 20rpx;
    color: #2196F3;
    line-height: 20rpx;
    }
}
</style>